<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in cardData" :key="index">
        <el-card shadow="hover" class="stat-card">
          <div class="flex items-center">
            <div class="icon-container" :style="{ backgroundColor: item.color }">
              <component :is="item.icon" class="text-white text-2xl" />
            </div>
            <div class="ml-4">
              <div class="text-gray-500 text-sm">{{ item.title }}</div>
              <div class="text-2xl font-bold">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :xs="24" :lg="12" class="mb-4">
        <el-card shadow="hover">
          <template #header>
            <div class="font-semibold">用户增长趋势</div>
          </template>
          <Chart :option="userChartOption" style="height: 400px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12" class="mb-4">
        <el-card shadow="hover">
          <template #header>
            <div class="font-semibold">充值统计</div>
          </template>
          <Chart :option="rechargeChartOption" style="height: 400px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue'
import { User, Coin, Document } from '@element-plus/icons-vue'
import Chart from '@/components/Chart.vue'

// 数据卡片配置
const cardData = ref([
  {
    title: '总用户数',
    value: '2,845',
    icon: markRaw(User), // 使用 markRaw 避免将组件变成响应式
    color: '#409EFF'
  },
  {
    title: '总充值金额',
    value: '¥ 45,230',
    icon: markRaw(Coin), // 使用 markRaw 避免将组件变成响应式
    color: '#67C23A'
  },
  {
    title: '总文章数',
    value: '1,234',
    icon: markRaw(Document), // 使用 markRaw 避免将组件变成响应式
    color: '#E6A23C'
  },
  {
    title: '今日新增',
    value: '128',
    icon: markRaw(User), // 使用 markRaw 避免将组件变成响应式
    color: '#F56C6C'
  }
])

// 用户增长图表配置
const userChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true,
    areaStyle: {}
  }]
})

// 充值统计图表配置
const rechargeChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [1200, 2000, 1500, 800, 700, 1100, 1300],
    type: 'bar',
    barWidth: '60%',
    itemStyle: { color: '#36a3f7' }
  }]
})

onMounted(() => {
  // 这里可以添加数据获取逻辑
  // fetchData()
})
</script>

<style scoped>
.stat-card {
  margin-bottom: 20px;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .stat-card {
    margin-bottom: 10px;
  }
}
</style>